使用vue-cli
开发项目过程中, 根据开发环境和正式环境不同, 我们往往需要请求不同域名下的后台接口, 这时候, 该怎么去设置, 达到同一种写法可以根据环境不同而自动切换请求域名呢? 本文将会介绍两种配置方式.本文中所有请求都是使用 axios
一
1、修改 config/dev.env.js
(开发环境的配置)
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST: '"http://localhost:3000"' // 开发环境接口地址(这里是增加的内容)
})
2、 修改 config/prod.env.js
(正式环境的配置)
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_HOST: '"http://localhost:8888"' // 正式环境接口地址(这里是增加的内容)
}
3、 使用 axios
发送请求
axios.get(process.env.API_HOST + '/api/userData') // 请求前加上 `process.env.API_HOST`
.then(data => {
console.log(data)
})
二
第二种方法主要使用axios
的创建实例的用法在
main.js
配置axios
import axios from 'axios'
const host = process.env.NODE_ENV === 'development' ? 'dev api host' : 'prod api host' // 根据 process.env.NODE_ENV 的值判断当前是什么环境
const instance = axios.create({
baseURL: host
})
Vue.prototype.$http = instance
在组件中调用
this.$http.get('/api/userData')
.then(data => {
console.log(data)
})
个人一般采用第二种方式,因为写的方便。不知大家都是怎么处理这个问题,欢迎分享。如果文章中有任何问题或者有更好的方式,也欢迎指正。
文章不好,也仅是分享我的一些观点,感谢观看!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。